<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="header">
    <nav>
      <div class="logo"><img src="../../assets/logo.png" /></div>
      <div class="el-menu-item" href="#">首 页</div>
      <div class="el-menu-item" href="#">关 于</div>
      <div class="el-menu-item" href="#">产品中心</div>
      <div class="el-menu-item" href="#">技术创新</div>
      <div class="el-menu-item" href="#">新闻动态</div>
      <div class="el-menu-item" href="#">联系我们</div>
    </nav>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Navbar",
};
</script>
<style lang="css">
.header {
  background: #035cac;
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  z-index: 999; /*z轴提高层次 */
}
nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
nav .logo {
  padding-right: 200px;
}
nav .el-menu-item {
  color: #f7eaea;
  padding: 15px 50px;
  position: relative;
  text-align: center;
  border-bottom: transparent;
  display: flex;
  transition: 0.4s;
  font-size: larger;
  font-weight: bold;
}
nav .el-menu-item:hover {
  background-color: #064693;
  border-bottom: solid 6px;
  border-bottom-color: #012646;
  height: 80px;
}
</style>
